<template>
  <mescroll-body
    ref="mescrollRef"
    @init="mescrollInit"
    @down="downCallback"
    @up="upCallback"
  >
    <view class="goods-combination">
      <!-- 头部背景图：爱拼才省钱 -->
      <view class="header"></view>

      <view class="main bg-primary">
        <view class="goods-list">
          <navigator
            v-for="(item, index) in groupList"
            :key="index"
            class="goods-item row mt20 bg-white"
            hover-class="none"
            :url="'/pages/goods_details/goods_details?id=' + item.goods_id"
          >
            <u-image
              width="180rpx"
              height="180rpx"
              border-radius="6rpx"
              lazy-load
              :src="item.image"
            />
            <view class="goods-info ml20">
              <view class="goods-name line2 mb10">{{ item.name }}</view>
              <view class="dec row">
                <view class="group mr20 row">
                  <view class="group-img row-center">
                    <image
                      class="icon-sm"
                      src="/static/images/icon_group_white.png"
                    ></image>
                  </view>
                  <view class="primary xxs mr10 ml10"
                    >{{ item.people_num }}人团</view
                  >
                </view>
                <view class="sale muted xs">已拼{{ item.sales_volume }}件</view>
              </view>
              <view class="info-footer row-between">
                <view class="price row">
                  <price-format
                    color="#FF2C3C"
                    :subscript-size="26"
                    :second-size="26"
                    :first-size="34"
                    :price="item.team_min_price"
                    :weight="500"
                  ></price-format>
                  <price-format
                    class="ml10"
                    color="#999"
                    :line-through="true"
                    :subscript-size="24"
                    :first-size="24"
                    :second-size="24"
                    :price="item.min_price"
                  ></price-format>
                </view>
                <button class="br60 btn white" size="sm" type="primary">
                  去拼团
                </button>
              </view>
            </view>
          </navigator>
        </view>
      </view>

      <block v-if="groupList.length == 0">
        <view
          class="column-center"
          style="padding-top: 200rpx; text-align: center"
        >
          <text class="lg" style="color: #ffd4d8">暂无拼团商品~</text>
        </view>
      </block>

      <float-tab></float-tab>
    </view>
  </mescroll-body>
</template>

<script>
import { loadingType } from "@/utils/type";
import { getGroupList } from "@/api/activity";
import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
export default {
  mixins: [MescrollMixin, MescrollCompMixin],
  data() {
    return {
      page: 1,
      groupList: [],
      status: loadingType.LOADING,
    };
  },

  methods: {
    // 获取拼团的列表
    applyList(page) {
      getGroupList({
        page_size: page.size,
        page_no: page.num,
      })
        .then(({ data }) => {
          console.log(data);
          if (page.num == 1) this.groupList = [];
          const curPageData = data.list;
          const curPageLen = curPageData.length;
          const hasNext = !!data.more;
          this.groupList = this.groupList.concat(curPageData);
          this.mescroll.endSuccess(curPageLen, hasNext);
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
    // 触底
    upCallback(page) {
      this.applyList(page);
    },
    // 下拉
    downCallback(page) {
      this.applyList(page);
    },
  },
};
</script>
<style lang="scss">
@import "@/styles/base.scss";

.goods-combination {
  background-color: $-color-primary;
  min-height: 100vh;

  .header {
    display: block;
    background-image: url();
    background-size: 100% 100%;
    height: 390rpx;
  }

  .main {
    padding: 0 20rpx 20rpx 20rpx;
    margin-top: -30rpx;
    position: relative;
    z-index: 1;

    .goods-list {
      .goods-item {
        border-radius: 20rpx;
        padding: 30rpx 20rpx;

        .goods-img {
          width: 180rpx;
          height: 180rpx;
          flex: none;
        }

        .goods-info {
          flex: 1;
          width: 475rpx;

          .group {
            border: 1px solid $-color-primary;
            border-radius: 4rpx;

            .group-img {
              padding: 2rpx 6rpx;
              background: linear-gradient(
                90deg,
                rgba(249, 95, 47, 1) 0%,
                rgba(255, 44, 60, 1) 100%
              );
              border-radius: 0 4rpx 4rpx 0;
            }
          }

          .info-footer {
            .btn {
              padding: 0 30rpx;
              background-color: #f95f2f;
            }
          }
        }
      }
    }
  }
}
</style>
